import React from 'react'
import { Avatar } from 'antd-mobile'
import { Cell } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import { UserAddOutline, UserCircleOutline, EditSOutline } from 'antd-mobile-icons'
import styles from './user.module.scss'
import user1 from '../../assets/userimg/ys.jpg'
import user2 from '../../assets/userimg/vip.jpg'
import user3 from '../../assets/userimg/jk.jpg'
import user4 from '../../assets/userimg/sh.jpg'
import user5 from '../../assets/userimg/jk+.jpg'
import user6 from '../../assets/userimg/wdzh.jpg'
import user7 from '../../assets/userimg/yhui.jpg'
import user8 from '../../assets/userimg/tc.jpg'
import user9 from '../../assets/userimg/kf.jpg'
import user10 from '../../assets/userimg/phone.jpg'
import mao from '../../assets/mao.jpg'
import Hoc_login from '../../utils/Hoc_login'
const Index = () => {
  const token = localStorage.getItem('token');
  const userInfo = JSON.parse(localStorage.getItem('userInfo'));
  console.log(userInfo.avatar);
  
  const navigate = useNavigate()
  const menuItems = [
    { img: user1, title: '我的医生' },
    { img: user2, title: '春雨会员' },
    { img: user3, title: '健康档案' },
    { img: user4, title: '收货地址', onClick: () => navigate('/address') },
    { img: user5, title: '健康+' },
    { img: user6, title: '我的账户' },
    { img: user7, title: '我的优惠券' },
    { img: user8, title: '我的套餐包' },
    { img: user9, title: '联系客服' },
    { img: user10, title: '更改手机' },
  ]

  return (
    <div className={styles.userbox}>
      <div className={styles.userTop}>
        <div className={styles.usergo}>
          <Avatar
            className={styles.usertx}
           src={userInfo.avatar}
          />
          <button className={styles.editPill} type="button">
            <UserAddOutline className={styles.editPillIcon} />
            修改头像
          </button>
          <button className={styles.editCircle} type="button" aria-label="编辑头像">
            <EditSOutline />
          </button>
        </div>
      </div>
      <div className={styles.menuList}>
        {menuItems.map((item, idx) => (
          <Cell
           onClick={item.onClick}
          className={styles.usecell}
            key={idx}
            title={
              <div className={styles.cellTitle}>
                <img src={item.img} className={styles.userimg} />
                <span>{item.title}</span>
              </div>
            }
            isLink
          />
        ))}
      </div>
    </div>
  )
}

export default  Hoc_login(Index)
